<template>
  <a-card :bordered="false" class="product-order">
    <s-table
      ref="table"
      rowKey="orderNo"
      size="default"
      :columns="columns"
      :data="loadData"
      :pageSize="10">
      <span slot="createTime" slot-scope="text, record">{{ getTimeFormat(record.createTime) }}</span>
      <span slot="status" slot-scope="text, record">
        {{ record.status==='UNPAY'?'未支付': record.status==='PAY'?'已支付':record.status==='FINISH'?'已结束':'已取消' }}
      </span>
      <span slot="price" slot-scope="text, record">
        <!--SELF自己购买 GIFT系统赠送-->
        <span v-if="record.type==='SELF'"> {{ record.price?keepN(record.price/100):0 }}</span>
        <span v-else>系统赠送</span>
      </span>
    </s-table>
  </a-card>
</template>

<script>
    import { STable } from '@/components'
    import {
        getTimeFormat,
        keepN
    } from '../../utils'
    import { pageMyCreateOrder } from '../../../api/product'

    export default {
        name: 'MemberQywx',
        components: {
            STable
        },
        data () {
            return {
                getTimeFormat,
                keepN,
                // 表头
                columns: [
                    // {
                    //   title: '编号',
                    //   width: '150px',
                    //   dataIndex: 'orderNo'
                    // },
                    {
                        title: '日期',
                        width: '200px',
                        dataIndex: 'createTime',
                        scopedSlots: { customRender: 'createTime' }
                    },
                    {
                        title: '账号',
                        width: '150px',
                        dataIndex: 'username'
                    },
                    {
                        title: '商品',
                        width: '150px',
                        dataIndex: 'productName'
                    },
                    {
                        title: '商品编号',
                        dataIndex: 'orderNo'
                    },
                    {
                        title: '价格(元)',
                        width: '100px',
                        dataIndex: 'price',
                        scopedSlots: { customRender: 'price' }
                    },
                    {
                        title: '支付状态',
                        width: '150px',
                        dataIndex: 'status',
                        scopedSlots: { customRender: 'status' }
                    }
                ],
                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    const qwUserId = this.$store.state.user.info.qwUserId || null
                    return pageMyCreateOrder(Object.assign({
                        current: parameter.pageNo,
                        size: parameter.pageSize
                    }, {
                        qwUserId: qwUserId,
                        size: parameter.pageSize
                    }))
                        .then(res => {
                            return {
                                data: res.records,
                                'pageSize': res.size,
                                'pageNo': res.current,
                                'totalCount': res.total
                            }
                        })
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .product-order {
        .table-page-search-wrapper {
            position: relative;
            padding-bottom: 30px;
            border-bottom: 1px solid #D9D9D9;

            .update-desc-state {
                position: absolute;
                right: 0;
                bottom: 0;
                height: 30px;
                font-size: 12px;
                color: #52C41A;

                .desc-state-icon {
                    margin-left: 8px;
                    font-size: 20px;
                    animation: syncAnimal 1.5s forwards infinite;
                }
            }
        }
    }

</style>
